<template>
  <!--
   查：
     1：定义api
     2:导入与调用
     3：存储数据与渲染
     4：与分页建立关联
         a:调用api时传入分页参数
         b:调用成功存储total
         c:页码改变页容量改变时都要调用api

   增：
     1：创建一个新增弹框组件
     2：导入注册使用
     3：点击新增打开弹框
     4：完成弹框组件内的布局
        部门选择
            el-tree布局
            调用获取组织架构数据的api获取数据
            树形数据转换并渲染
            控制el-tree的显示与消失
     5：完成表单内的表单验证
     6：定义新增接口api
     7:导入接口api
     8:点击确定调用api
     9:调用成功
        提示
        关闭弹框
        清空表单数据与验证
        刷新父级列表数据

    删：
      1：点击删除弹出确定框
      2：定义删除api
      3:导入删除api
      4:确定框点击确定后调用删除api
      5:调用成功
          提示
          刷新列表数据
              a:直接回到第一页
              b:如果页码>1  && 当前页只有一条数据   页码--  再调用接口

     excel导出
       1：拿到所有员工数据
       2：1:下载插件  file-saver    xlsx@0.17.0
          2:复制第三方的导出文件到项目内
       3:导入相应的方法export_json_to_excel
       4:调用export_json_to_excel

       查看：
         1：创建路由所对应组件
         2：配制路由
         3：点击跳转，跳转时带上id

      点击员工头像生成二维码
        1：创建一个弹框组件
        2：在父组件使用
        3：点击头像打开弹框
        4：生成二维码（打开弹框时要传入头像地址生成二维码）

     分配角色
       1：创建一个分配角色的弹框组件
       2：在父组件内使用
       3：点击分配角色打开弹框
       4：角色列表显示
       5：默认勾选角色
       6：定义与导入调用修改用户角色api
       7:调用成功：
           提示
           关闭弹框
           清空已勾选数据
           刷新父级列表：看父级有没有显示该数据

 -->
  <div class="employees">
    <el-card class="top">
      <div class="main">
        <div class="left">
          <i class="el-icon-info" />
          <span>共{{ total }}条记录</span>
        </div>
        <div class="right">
          <el-button
            type="danger"
            size="small"
            @click="exportUser"
          >普通excel导出</el-button>
          <el-button type="info" size="small">复杂表头excel导出</el-button>
          <el-button
            type="success"
            size="small"
            @click="$router.push('/employees/import')"
          >excel导入</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addClick"
          >新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table :data="list">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="staffPhoto" label="头像">
          <template v-slot="{ row }">
            <img
              v-imgerror
              class="avatar"
              :src="row.staffPhoto"
              alt=""
              @click="avatarClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          :formatter="formatterFormOf"
        />
        <el-table-column prop="formOfEmployment" label="聘用形式-指令转换">
          <template v-slot="{ row }">
            <div v-formatType:hireType="row.formOfEmployment" />
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间">
          <template v-slot="{ row }">
            <div v-formatTime="row.timeOfEntry">
              ----- {{ row.timeOfEntry }}----
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableState"
          :formatter="formatterEnableState"
          label="状态"
        />
        <el-table-column prop="enableState" label="状态-指令">
          <template v-slot="{ row }">
            <div v-formatType:workingState="row.enableState" />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template v-slot="{ row }">
            <div>
              <el-button
                type="text"
                @click="$router.push('/employees/detail/' + row.id)"
              >查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="roleClick(row.id)">角色</el-button>
              <!--
                简单模式  最基本v-if='...'
                工具型方法
                mixins做法
              -->
              <!-- <el-button
                v-if="setButtonShow('employees_delBtn')"
                type="text"
                @click="delClick(row)"
              >删除</el-button> -->
              <el-button
                v-if="setButtonStatus('employees_delBtn')"
                type="text"
                @click="delClick(row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 5, 10, 50, 100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 二维码弹框组件 -->
    <!-- <QrcodeCom :is-show="appShow" @update:isShow="appShow = $event" /> -->
    <QrcodeCom ref="qrcodeCom" :is-show.sync="appShow" />
    <!-- 分配角色弹框 -->
    <SetRole ref="setRole" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import employeesData from '@/api/constant/employees'
import jsCookie from 'js-cookie'
import Add from './components/add'
// 1:拷贝相应文件到项目  2：安装  file-saver  xlsx@0.17.0  3:导入
// import的返回值是什么？
// import { export_json_to_excel } from '@/vendor/Export2Excel'
import moment from 'moment'
import QrcodeCom from './components/qrcode.vue'
import SetRole from './components/setRole.vue'
// 持久化：1：值改变就存储到浏览器  2：初始值读取浏览器存储
import { mapState } from 'vuex'
import { setButtonShow } from '@/utils'
export default {
  components: {
    Add,
    QrcodeCom,
    SetRole
  },
  computed: {
    ...mapState('login', ['userInfo'])
  },
  data() {
    return {
      setButtonShow,
      appShow: false,
      list: [{}],
      page: {
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees_size') || 1 //	是	10	每页条数
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleSizeChange() {
      this.getData()
      jsCookie.set('employees_size', this.page.size)
    },
    handleCurrentChange() {
      this.getData()
    },
    // 进入页面获取员工列表
    async getData() {
      const res = await sysUser(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      // console.log('员工列表数据', res)
    },
    // 聘用形式数据转换
    formatterFormOf(row, column, cellvalue, index) {
      // row:当前行数据
      // column：当前列组件内提供的数据
      // cellvalue:当前项的值
      // index：索引
      // employeesData.hireType
      // cellvalue:1
      // find:  返回值=数组.find(item=>return boolean)  true,返回值就是相应项的item  找不到返回值:undefined
      const findItem = employeesData.hireType.find(
        (item) => item.id === +cellvalue
      )
      return findItem ? findItem.value : '-'
    },
    // 状态数据转换
    formatterEnableState(row, column, cellvalue, index) {
      const findItem = employeesData.workingState.find(
        (item) => +item.id === cellvalue
      )
      return findItem ? findItem.value : '-'
    },
    // 新增按钮点击
    addClick() {
      // 打开弹框
      this.$refs.add.isShow = true
    },
    // 删除点击
    delClick(row) {
      this.$confirm('您确定删除：' + row.username + '该员工吗')
        .then(async() => {
          await sysUserDelete(row.id)
          this.$message.success('删除成功')
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 导出excel点击
    async exportUser() {
      const obj = await import('@/vendor/Export2Excel')
      // 获取所有员工数据
      const res = await sysUser({
        page: 1,
        size: 999999
      })
      // 转换数据
      const newData = res.data.rows.map((item, index) => {
        return [
          index + 1,
          item.username,
          item.mobile,
          item.workNumber,
          item.departmentName,
          moment(item.timeOfEntry).format('YYYY-MM-DD')
        ]
      })
      obj.export_json_to_excel({
        header: ['序号', '姓名', '手机号', '工号', '部门', '入职时间'],
        data: newData,
        filename: '员工列表'
      })

      // console.log('获取所有员工数据', res)
    },
    // 头像点击
    avatarClick(url) {
      if (!url) {
        this.$message.error('无图片地址')
        return
      }
      // 打开弹框
      this.appShow = true
      //  调用弹框内的方法生成二维码
      this.$refs.qrcodeCom.createCode(url)
    },
    // 角色点击
    roleClick(id) {
      this.$refs.setRole.isShow = true
      // 调用获取用户角色数据方法
      this.$refs.setRole.getUserRole(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
  .avatar {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  .top {
    margin-bottom: 20px;
  }
  .main {
    display: flex;
    justify-content: space-between;
    .left {
      padding: 5px;
      border: 1px solid #409eff;
      background-color: #e6f7ff;
      i {
        color: #409eff;
      }
    }
  }
  .page {
    text-align: right;
    padding-top: 20px;
  }
}
</style>
